<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品分类</title>
    <link rel="stylesheet" href="../../font/iconfont.css">
    <link rel="stylesheet" href="../../lib/bootstrap-3.4.1-dist/css/bootstrap.min.css">
    <script src="../../lib/jquery/jquery-3.6.0.js"></script>
    <script src="../../lib/bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
    <script src="../../javaScript/shangpinshuxing/shangpinfenlei.js"></script>
    <style>
        body {
            background-color: #F2F2F2;
        }

        .container {
            width: 1670px;
            line-height: 80px;
            background-color: white;
        }

        .head_height {
            height: 80px;
        }

        #backg {
            background-color: white;
            margin-top: 20px;
            height: 80px;
        }

        /* input输入框 */
        #backg>div>div>div:nth-child(1)>select,
        #backg>div>div>div:nth-child(2)>div>input,
        #backg>div>div>div:nth-child(3)>div>input {
            width: 255px;
            height: 40px;
        }

        /* 搜索重置按钮 */
        #backg>div>div>div:nth-child(4)>div:nth-child(1)>div,
        #backg>div>div>div:nth-child(4)>div:nth-child(2)>div {
            width: 85px;
            height: 40px;
            line-height: 40px;
            border: 1px solid rgb(214, 212, 212);
            text-align: center;
        }

        #backg>div>div>div:nth-child(4) {
            position: relative;
        }

        #backg>div>div>div:nth-child(4)>div:nth-child(1) {
            position: absolute;
            top: 20px;
            right: 100px;
        }

        #backg>div>div>div:nth-child(4)>div:nth-child(1)>div {
            background-color: #0099FF;
            color: white;
        }

        #backg>div>div>div:nth-child(4)>div:nth-child(2)>div:hover {
            background-color: #0099FF;
            color: white;
            border: none;
        }

        #backg>div>div>div:nth-child(4)>div:nth-child(2) {
            position: absolute;
            top: 20px;
            right: 0px;
        }

        /* 数据列表 */
        .content {
            margin-top: 10px;
        }

        .anniu {
            width: 80px;
            height: 35px;
            line-height: 33px;
            background-color: white;
            border: none;
            border: 1px solid rgb(214, 212, 212);
        }

        .anniu:hover,
        .xinzeng:hover {
            color: white;
            background-color: #0099FF;
        }

        .xinzeng {
            width: 80px;
            height: 35px;
            line-height: 33px;
            border: none;
            border: 1px solid #0099FF;
            background-color: white;
            color: #0099FF;
        }

        .table_page {
            height: 74px;
            line-height: 74px;
        }

        .table_page>nav,
        .page_num {
            height: 74px;
            line-height: 74px;
        }

        .page_num {
            padding: 20px;
        }

        .page_num>ul {
            height: 34px;
            border-radius: 2px;
            padding: 0;
            overflow: hidden;
            transition: all 0.3s linear;
        }

        .page_num>ul:hover {
            height: 136px;
        }

        .page_num>ul>li {
            list-style: none;
            padding: 0 10px;
            height: 34px;
            line-height: 34px;
            background-color: #F2F2F2;
        }

        .tr_color {
            background-color: #F2F2F2;
        }

        .shanchu_table:hover,
        .lookXq:hover {
            color: #0099FF;
            cursor: pointer;
        }

        .shanchu_table:hover,
        .lookXq:hover {
            color: #0099FF;
            cursor: pointer;
        }

        .page_num>ul>li:hover {
            color: #0099FF;
            cursor: pointer;
        }
        .table_page>nav {
            text-align: right;
        }
        /* 数据渲染 */
    </style>
</head>

<body>
    <!-- 当前状态一栏 -->
    <div id="motaikuang"></div>
    <div id="backg" class="container head_height">
        <div>
            <div class="row nav">
                <div class="col-md-3 col-xs-3">
                    当前状态 <select name="请选择当前状态" id="drop_down_one">
                        <option value="请选择当前状态">请选择当前状态</option>
                        <option value="启用">启用</option>
                        <option value="禁用">禁用</option>
                    </select>
                </div>
                <div class="col-md-3 col-xs-3">
                    <div>
                        分类名称 <input type="text" placeholder="分类名称" id="drop_down_two">
                    </div>
                </div>
                <div class="col-md-3 col-xs-3">
                    <div>
                        商品规格 <input type="text" placeholder="规格名称" id="drop_down_three">
                    </div>
                </div>
                <div class="col-md-3 col-xs-3">
                    <div class="col-md-4 col-md-offset-4 col-xs-4 col-xs-offset-4">
                        <div class="sousuo">
                            <span class="iconfont icon-sousuo"></span><span>搜索</span>
                        </div>
                    </div>
                    <div class="col-md-4 col-xs-4">
                        <div class="chongzhi">
                            <span class="iconfont icon-zhongzhizhongzhi"></span><span>重置</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 数据列表 -->
    <div class="container content">
        <div class="row">
            <div class="col-md-11 col-xs-11">
                <div class="row">
                    <div class="col-md-1 col-xs-1">
                        <span class="iconfont icon-shujukuliebiao"></span>&nbsp数据列表
                    </div>
                    <div class="col-md-1 col-xs-1">
                        <button class="anniu"><span class="iconfont icon-shanchu"></span>删除</button>
                    </div>
                </div>
            </div>
            <div class="col-md-1 col-xs-1">
                <a href="../shangpinshuxing/xinznegfenlei.html"><button class="xinzeng"><span>+</span>新增</button></a>
            </div>
        </div>
        <table class="table table table-bordered">
            <thead>
                <tr class="table_row tr_color">
                    <th>
                        <input type="checkbox" class="checkbox_quanxuan">
                    </th>
                    <th>序号</th>
                    <th>分类名称</th>
                    <th>分类编码</th>
                    <th>商品规格</th>
                    <th>状态</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody class="table_row table_content">

            </tbody>
        </table>
        <div class="row table_page">
            <div class="col-md-8 col-xs-8 ">
                <input type="checkbox" class="checkbox_quanxuan" value="option">&nbsp&nbsp全选
            </div>
            <nav aria-label="Page navigation" class="col-md-3 col-xs-3">
                <ul class="pagination">
                    
                </ul>
            </nav>
            <div class="col-md-1 col-xs-1 page_num">
                <ul>
                    <li data-num="10" class="page_data">10条/页<span class="iconfont icon-arrow-down"></span></li>
                    <li data-num="15" class="page_data">15条/页</li>
                    <li data-num="20" class="page_data">20条/页</li>
                    <li data-num="25" class="page_data">25条/页</li>
                </ul>
            </div>
        </div>

    </div>

    <!-- js渲染表格 -->
    <script>
        let pagingData = stuData
        function showTable(data) {
            $('.table_content').html("")
            $('#motaikuang').html('')
            for (let i = 0; i < data.length; i++) {
                $('#motaikuang').append(`
                <div class="modal fade" tabindex="-1" role="dialog" id="shanchu_table${data[i].id}">
                    <div class="modal-dialog" role="document">
                        <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                            <h4 class="modal-title">是否要确认删除${data[i].fenleiName}的数据</h4>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                            <button type="button" class="btn btn-primary">确定</button>
                        </div>
                    </div>
                </div>  
                `)
                $('.table_content').append(`
                    <tr>
                        <td>
                            <input type="checkbox" value="${data[i].id}" name="check_table"> 
                        </td>
                        <td>${data[i].id}</td>
                        <td>${data[i].fenleiName}</td>
                        <td>${data[i].fenleiCod}</td>
                        <td>${data[i].norms}</td>
                        <td>${data[i].state}</td>
                        <td>
                            <span class="shanchu_table" type="button" data-toggle="modal" data-target="#shanchu_table${data[i].id}"">删除</span>
                            &nbsp<a href="./xinznegfenlei.html"><span class="lookXq">编辑</span></a>&nbsp<a href="./shangpinxiangqing.html"><span  class="lookXq">查看详情</span></a>
                        </td>
                    </tr>
                    
                `)
            }

            $('.lookXq').parent().css({
                color: "black",
                textDecoration: "none"
            })


        }
        let num = 1 //初始页
        let lengthPage //最大页数
        let disPage = 10
        $('.page_data').click(function () {
            disPage = parseInt($(this).attr('data-num'))
            paging(num, pagingData, disPage)
        })

        function showPage(data, disPage) {
            $('.pagination').html(`    <li class="prePage">
                        <a href="#" aria-label="Previous">
                            <span aria-hidden="true">&laquo;</span>
                        </a>
                    </li>
                  
                    <li class="nextPage">
                        <a href="#" aria-label="Next">
                            <span aria-hidden="true">&raquo;</span>
                        </a>
                    </li>`) //每次渲染前刷新一下渲染的内容

            lengthPage = Math.ceil(data.length / disPage) //lengthPage是最大页数

            for (let i = 1; i <= lengthPage; i++) {
                let pageCont = $('.pagination li:last-of-type').before(`
        <li class="new_page"><a href="#">${i}</a></li>
        `)
                if (lengthPage <= 5) {
                    pageCont
                } else if (lengthPage > 5) {
                    if (num <= 2) {
                        pageCont
                        $('.new_page').eq(num + 2).children().text(`...`)
                        $('.new_page').slice(num + 3, lengthPage - 1).css({
                            display: 'none'
                        })
                    } else if (num > 2 && num < 4) {
                        $('.new_page').eq(num + 1).children().text(`...`)
                        $('.new_page').slice(num + 2, lengthPage - 1).css({
                            display: 'none'
                        })
                    } else if (num >= 4) {
                        pageCont
                        if (num < lengthPage - 2) {
                            $('.new_page').eq(1).children().text(`...`)
                            $('.new_page').eq(num + 1).children().text(`...`)
                            $('.new_page').slice(num + 2, lengthPage - 1).css({
                                display: 'none'
                            })
                            $('.new_page').slice(2, num - 2).css({
                                display: 'none'
                            })
                        } else if (num <= lengthPage && num > lengthPage - 2) {
                            $('.new_page').eq(1).children().text(`...`)
                            $('.new_page').slice(2, lengthPage - 3).css({
                                display: 'none'
                            })
                        } else {
                            $('.new_page').eq(1).children().text(`...`)
                            $('.new_page').slice(2, num - 2).css({
                                display: 'none'
                            })
                        }
                    }
                }
            }
            $('.new_page').eq(num - 1).toggleClass('active')
        }
        showPage(pagingData, disPage)
        let start //每一页的起始坐标
        let checkedBoole

        function paging(num, data, disPage) { // 修改每一页显示的内容
            start = (num - 1) * disPage //每一页的起始下标为页面值减1再乘5，
            let arr = data.slice(start, start + disPage)
            showTable(arr)
            $('.new_page').eq(num - 1).addClass('active')
            $('.new_page').eq(num - 1).siblings().removeClass('active')

            $('.checkbox_quanxuan').click(function () { //全选按钮
                if ($(this).prop('checked') == true) {
                    $(".table_content input").prop("checked", true)
                } else {
                    $(".table_content input").prop("checked", false)
                }
            })
            showPage(pagingData, disPage)

            // console.log($('.table_content input').prop('checked'));
        }
        $('.table_content input').click(function () { //获取checked是否为选中
            console.log($("input[checkbox='false']"));
            console.log($("input[type='checkbox']"));
            if ($(this).prop('checked') == true) { //选中的时候执行这个结果
                $('.shanchu').click(function () {
                    console.log($("input[checked='true']"));
                })

            } else { //未选中的时候执行这个结果
                checkedBoole = $(this).prop('checked')
                $('.shanchu').click(function () {
                    console.log(11111)
                })

            }
        })
        paging(1, pagingData, disPage)
        // 点击页数跳转到对应的页数
        $('.pagination').on('click', '.new_page', function () {
            paging($(this).text(), pagingData, disPage)
            num = parseInt($(this).text())
        })
        // 点击上一页跳转的上一页
        $('.pagination').on('click', '.prePage', function () {
            num > 1 ? num-- && paging(num, pagingData, disPage) : paging(1, pagingData, disPage)
        })
        // 点击下一页跳转的下一页
        $('.pagination').on('click', '.nextPage', function () {
            num < lengthPage ? num++ && paging(num, pagingData, disPage) : paging(lengthPage, pagingData, disPage)
        })


        let atState //获取选择的状态
        $('#drop_down_one').on('click', $('option'), function () {
            atState = $(this)
        })

        let fenleiName //获取分类名称
        $('#drop_down_two').on('focusout', function () {
            fenlName = $(this)
        })
        let guigeName //获取商品规格
        $('#drop_down_three').on('focusout', function () {
            guigeName = $(this)
        })

        $('.sousuo').click(function () { //查找
            pagingData = stuData
            let sousuoData
            //如果为true的时候就为开启，为false的时候就关闭
            if (atState != undefined) {
                sousuoData = pagingData.filter(item => item.state == atState.val())//状态
                pagingData = sousuoData
            }
            if (fenlName != undefined) {
                sousuoData = pagingData.filter(item => item.fenleiName == fenlName.val())
                pagingData = sousuoData
            }
            if (guigeName != undefined) {
                sousuoData = pagingData.filter(item => item.norms == guigeName.val())
                pagingData = sousuoData
            }

            showTable(pagingData) //渲染页面的函数
        })
        $('.chongzhi').click(function () { //重置查找
            pagingData = stuData
            if (atState != undefined) {
                atState.html(`
                    <option value="">请选择当前状态</option>
                    <option value="启用">启用</option>
                    <option value="禁用">禁用</option>
                `)
                atState = undefined
            }
            if (fenlName != undefined) {
                fenlName.val('')
                fenlName = undefined
            }
            if (guigeName != undefined) {
                guigeName.val('')
                guigeName = undefined
            }
            paging(1, pagingData, disPage) //渲染页面的函数
            // showTable(pagingData)
        })
        let del_table
        $('.table_content').on('click', '.shanchu_table', function () { //删除
            del_table = $(this)
        })
        $('#motaikuang').on('click', '.btn-primary', function () {
            let idNum = parseInt(del_table.parent())
            // let idNum = parseInt(del_table.parent().siblings().eq(1).text())
            del_table.parent().parent().remove()
            pagingData.splice(idNum, 1)
            paging(num, pagingData, disPage)
            
            $('.fade').css({ display: 'none' })
            $(this).parent().parent().parent().parent().remove()
            console.log($(this).parent().parent().parent().parent().remove());
        })
        $('.anniu').click(function () {
            if (confirm('是否确定删除？')) {
                $("input[name='check_table']:checked").each(function () { // 遍历选中的checkbox
                    let n = $(this).parents("tr").index(); // 获取checkbox所在行的顺序
                    let m = parseInt($(".table_content").find("tr:eq(" + n + ")").children().eq(1).text()) //所在行的id值
                    $(".table_content").find("tr:eq(" + n + ")").remove();
                    for (let i = 0; i < stuData.length; i++) {
                        if (m == pagingData[i].id) {
                            pagingData.splice(i, 1)
                            i--
                            break
                        }
                    }
                });
                paging(num, pagingData, disPage)
                alert('删除成功')
            }
        })
        



    </script>
</body>

</html>